<script setup>
import { ref, reactive, toRaw } from 'vue';
import { service, cache } from '@utils';
import { ElMessage } from 'element-plus';

const emit = defineEmits(['refresh']);

const props = defineProps({
    menus: Array,
    types: Array,
});

const visible = ref(false);
const formRef = ref();
const parents = ref();
const disable = ref(false);
const lodTitle = ref();
const state = reactive({
    param: {},
    flag: '',
});
// let flag = ref(false)

const rules = {
    parentId: [{ required: true, message: '请选择', trigger: 'change' }],
    label: [{ required: true, message: '请输入', trigger: 'blur' }],
    menuType: [{ required: true, message: '请选择', trigger: 'change' }],
    perms: [{ required: true, message: '请输入', trigger: 'blur' }],
    display: [{ required: true, message: '请选择', trigger: 'change' }],
    path: [{ required: true, message: '请输入', trigger: 'blur' }],
    // shareable: [{ required: true, message: '请选择', trigger: 'change' }]
};

const parentNo = [{ id: '0', name: '菜单' }];
const open = value => {
    if (value.type == 2) {
        lodTitle.value = '修改';
        if (value.parentId == 0) {
            parents.value = [{ id: '0', name: '菜单' }];
        } else {
            parents.value = props.menus.filter(item => item.id == value.parentId);
        }
        disable.value = true;
    } else {
        lodTitle.value = '新增';
        getMenus();
        disable.value = false;
    }
    let timeOut = setTimeout(() => {
        clearTimeout(timeOut);
        state.param = { ...value };
        state.param.sort = state.param.sort || 0;
        visible.value = true;
    }, 150);
};

const close = () => {
    visible.value = false;
    state.param = {};
    parents.value = null;
    disable.value = false;
};

const getMenus = async () => {
    const res = await service.auth.menuTree();
    res.unshift({ id: '0', name: '菜单' });
    parents.value = res && res.length > 0 ? res : parentNo;
};

const sure = async () => {
    formRef.value.validate(valid => {
        if (valid) {
            realSubmit();
        }
    });
};

const saveSure = async () => {
    formRef.value.validate(valid => {
        if (valid) {
            saveSubmit();
        }
    });
};

const realSubmit = async () => {
    let param = JSON.parse(JSON.stringify(state.param));
    param.children = [];
    param._X_ROW_CHILD = [];
    param.perms = param.perms.replace(/\//g,':')
    // param.parentId = state.param.id;
    const res = await service.auth.menuEdit(toRaw(param));
    if (res) {
        ElMessage.success('修改成功');
    }
    emit('refresh', { ...toRaw(state.param), ...res, isUpdate: !!state.param.id });
    close();
};

const saveSubmit = async () => {
    let param = JSON.parse(JSON.stringify(state.param));
    param.parentId = state.param.id;
    delete param.id
    param.perms = param.perms.replace(/\//g,':')
    const res = await service.auth.menuSave(toRaw(param));
    if (res) {
        ElMessage.success('新增成功');
    }
    emit('refresh', { ...toRaw(state.param), ...res, isUpdate: !!state.param.id });
    close();
};
//把方法暴露给父组件
defineExpose({
    open,
});
</script>

<template>
    <el-dialog v-model="visible" :title="lodTitle" center :close-on-click-modal="false" @close="close" destroy-on-close :width="500">
        <section>
            <el-form :model="state.param" :rules="rules" ref="formRef" label-width="100px" label-suffix=":" onsubmit="return false;">
                <el-form-item label="上级菜单" prop="parentId" v-if="lodTitle == '修改'">
                    <el-tree-select v-model="state.param.parentId" :data="parents" :render-after-expand="false" check-strictly clearable :props="{ value: 'id', label: 'name' }" style="width: 100%" :disabled="disable" />
                </el-form-item>
                <el-form-item label="上级菜单" prop="id" v-else>
                    <el-tree-select v-model="state.param.id" :data="parents" :render-after-expand="false" check-strictly clearable :props="{ value: 'id', label: 'name' }" style="width: 100%" :disabled="disable" />
                </el-form-item>
                <el-form-item label="菜单类型" prop="menuType">
                    <el-radio-group v-model="state.param.menuType">
                        <el-radio v-for="{ label, value } in types" :label="value - 0">{{ label }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="菜单名称" prop="name">
                    <el-input v-model="state.param.name" placeholder="请输入菜单名称" clearable></el-input>
                </el-form-item>
                <el-form-item v-if="state.param.menuType == 0 || state.param.menuType == 1" label="菜单路径" prop="path">
                    <el-input v-model="state.param.path" placeholder="请输入菜单路径" clearable></el-input>
                </el-form-item>
                <el-form-item v-if="state.param.menuType == 1 || state.param.menuType == 2" label="权限" prop="perms">
                    <el-input v-model="state.param.perms" placeholder="请输入权限" clearable></el-input>
                </el-form-item>
                <el-form-item label="是否显示" prop="visible">
                    <el-radio-group v-model="state.param.visible">
                        <el-radio :label="1">显示</el-radio>
                        <el-radio :label="0">隐藏</el-radio>
                    </el-radio-group>
                </el-form-item>
                <!-- <el-form-item label="是否共享" prop="shareable">
                    <el-radio-group v-model="state.param.shareable">
                        <el-radio :label="true">共享</el-radio>
                        <el-radio :label="false">平台</el-radio>
                    </el-radio-group>
                </el-form-item> -->
                <el-form-item v-if="state.param.menuType == 0" label="图标" prop="icon">
                    <el-input v-model="state.param.icon" placeholder="请输入图标" clearable></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input type="number" v-model="state.param.sort" placeholder="请输入排序"></el-input>
                </el-form-item>
            </el-form>
        </section>

        <template #footer>
            <span class="flex-align-end">
                <div class="margin-right20">
                    <el-button @click="close">取消</el-button>
                </div>
                <el-button v-if="state.param.type == 2" type="primary" @click="sure">确定</el-button>
                <el-button v-else type="primary" @click="saveSure">新增</el-button>
            </span>
        </template>
    </el-dialog>
</template>
